<template>
  <div class="app-user">
    <div class="user-header">
      <img src="https://img11.360buyimg.com/jdphoto/s120x120_jfs/t21160/90/706848746/2813/d1060df5/5b163ef9N4a3d7aa6.png" class="header-img" />
      <ul class="user-info">
        <li class="user-name">钻石王老五</li>
        <li class="node-info">
          <span class="business-node">商家节点</span>
        </li>
      </ul>
    </div>
    <!-- /header -->
    <section class="order-all">
      <router-link to="/order" class="look-orders" tag="span">查看全部订单>></router-link>
      <ul class="order-list">
        <router-link to="/order/orderDetail" class="order-item" tag="li">
          <svg-icon icon-class="pending-pay" />
          <span>待付款</span>
        </router-link>
        <router-link to="/order/toBeDelivered" class="order-item" tag="li">
          <svg-icon icon-class="be-delivered" />
          <span>待发货</span>
        </router-link>
        <router-link to="/order/pendingReceipt" class="order-item" tag="li">
          <svg-icon icon-class="pending-receipt" />
          <span>待收货</span>
        </router-link>
        <router-link to="/order" class="order-item" tag="li">
          <svg-icon icon-class="all-orders" />
          <span>退换/售后</span>
        </router-link>
      </ul>
    </section>
    <!-- /订单管理 -->

    <section class="mine-content">
      <ul class="options-list">
        <router-link to="wallet/myWallet" class="option-item" tag="li">
          <div class="item-info">
            <dollar-circle-outlined class="icon" />
            <span>我的钱包</span>
          </div>
          <van-icon name="arrow" color="#DBDBDB" />
        </router-link>
        <router-link to="/wallet/myWallet" class="option-item" tag="li">
          <div class="item-info">
            <link-outlined class="icon" />
            <span>分享链接</span>
          </div>
          <van-icon name="arrow" color="#DBDBDB" />
        </router-link>
      </ul>
    </section>
    <!-- /我的钱包 -->

    <section class="mine-content">
      <ul class="options-list">
        <router-link to="/mine/shippingAddress" class="option-item" tag="li">
          <div class="item-info">
            <global-outlined class="icon" />
            <span>收货地址</span>
          </div>
          <van-icon name="arrow" color="#DBDBDB" />
        </router-link>
        <router-link to="/mine/messageCenter" class="option-item" tag="li">
          <div class="item-info">
            <message-outlined class="icon" />
            <svg-icon class="incon" icon-class="message-center" />
            <span>消息中心</span>
          </div>
          <van-icon color="#DBDBDB" name="arrow" />
        </router-link>
        <router-link to="/mine/helpCenter" class="option-item" tag="li">
          <div class="item-info">
            <question-circle-outlined class="icon" />
            <span>帮助中心</span>
          </div>
          <van-icon color="#DBDBDB" name="arrow" />
        </router-link>
        <router-link to="/mine/setting" class="option-item" tag="li">
          <div class="item-info">
            <setting-outlined class="icon" />
            <svg-icon class="incon" icon-class="setting" />
            <span>设置</span>
          </div>
          <van-icon color="#DBDBDB" name="arrow" />
        </router-link>
      </ul>
    </section>
    <!-- /个人信息管理 -->
  </div>
</template>

<script>
import './index.scss'
import { DollarCircleOutlined, GlobalOutlined, LinkOutlined, MessageOutlined, QuestionCircleOutlined, SettingOutlined } from '@ant-design/icons-vue'

export default {
  name: 'User',
  components: {
    DollarCircleOutlined,
    GlobalOutlined,
    LinkOutlined,
    MessageOutlined,
    QuestionCircleOutlined,
    SettingOutlined,
  },
}
</script>

<style lang="scss"></style>
